<template>
    <div ref="fullScreenRef" id="log">
        <scale-screen :width="1920" :height="1080" :auto-scale="true" :boxStyle="{margin: '0 !important', background: '#0e1838'}">
            <div class="box">
                <div class="top">
                    <div style="color: #ffffff;cursor: pointer;" @click="quit" class="fs-14 quitBorder gradient-text">
                        返回首页
                    </div>
                    <div class="time">
                        <el-date-picker v-model="filterDate" width="100" @change="onTimeChange" type="daterange"
                            unlink-panels range-separator="至" start-placeholder="起始时间" format="YYYY/MM/DD"
                            value-format="YYYY-MM-DD" end-placeholder="结束时间" :shortcuts="shortcuts"
                            :clearable="false" />
                    </div>
                </div>
                <titleMsg :msg="titleinfomsg"></titleMsg>
                <div style="margin-top: 10px;" class="flex">
                    <leftMsg ref="childRef" :ranklist="ranklist"></leftMsg>
                    <centerMsg :msg="titleinfomsg" style="flex: 1;" class="center-content"></centerMsg>
                    <rightMsg :filterDate="filterDate"></rightMsg>
                </div>
                <div class="bottom"></div>
            </div>

        </scale-screen>
    </div>
</template>

<script setup lang="ts">
// import VScaleScreen from 'v-scale-screen'
import dayjs from 'dayjs'
import titleMsg from './titleMsg.vue'
import leftMsg from './leftMsg.vue'
import rightMsg from './rightMsg.vue'
import centerMsg from './centerMsg.vue'
import { ref, reactive, onMounted } from 'vue'
import { api as fullscreen } from 'vue-fullscreen'
import { isFullYear, isFullMonth } from '../../../utils/utils'
import { getBiQuerySalesVolumeApi, getBiSalesRankingApi } from '../../../api/visualization/visualization'
import router from '@/router'
import scaleScreen from '@/components/scale-screen/scale-screen.vue'
const onTimeChange = (val: any) => {
    if (isFullYear(val[0], val[1])) {
        type.value = 0
    } else if (isFullMonth(val[0], val[1])) {
        type.value = 1
    } else {
        type.value = 2
    }
    getBiQuerySalesVolumefn()
    getBiSalesRankingfn()
}
const quit = () => {
    fullscreen.exit()
    router.push({ path: '/index' })
}
const type = ref(1)
const fullScreenRef = ref<HTMLElement | null>(null)
const childRef = ref<any>(null)

const state = reactive({
    fullscreen: false,
    teleport: true
})

onMounted(() => {
    toggleFullscreen()
    date.value = dayjs().format('YYYY年MM月DD日')
    childRef.value.a()
    getBiQuerySalesVolumefn()
    getBiSalesRankingfn()
})

const getBiSalesRankingfn = () => {
    getBiSalesRankingApi({
        startTime: filterDate.value[0],
        endTime: filterDate.value[1],
        limit: 3
    }).then((res: any) => {
        console.log(res, 'gsdhjghdhdgjsu')
        ranklist.value = res
    })
}
const ranklist = ref([])
const getBiQuerySalesVolumefn = () => {
    getBiQuerySalesVolumeApi({
        startDate: filterDate.value[0],
        endDate: filterDate.value[1],
        type: type.value
    }).then((res: any) => {
        titleinfomsg.value = res
    })
}
const titleinfomsg = ref()
const filterDate = ref<any>([dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().endOf('month').format('YYYY-MM-DD')])
const shortcuts = [
    {
        text: dayjs().format('YYYY-MM'),
        value: () => {
            const startDateOfMonth = dayjs().startOf('month')
            const endDateOfMonth = dayjs().endOf('month')
            return [startDateOfMonth, endDateOfMonth]
        },
    },
    {
        text: dayjs().subtract(1, 'month').format('YYYY-MM'),
        value: () => {
            const startDateOfMonth = dayjs().subtract(1, 'month').startOf('month')
            const endDateOfMonth = dayjs().subtract(1, 'month').endOf('month')
            return [startDateOfMonth, endDateOfMonth]
        },
    },
    {
        text: dayjs().subtract(2, 'month').format('YYYY-MM'),
        value: () => {
            const startDateOfMonth = dayjs().subtract(2, 'month').startOf('month')
            const endDateOfMonth = dayjs().subtract(2, 'month').endOf('month')
            return [startDateOfMonth, endDateOfMonth]
        },
    },
    {
        text: '今天',
        value: () => {
            const startDateOfMonth = dayjs().format('YYYY-MM-DD')
            const endDateOfMonth = dayjs().format('YYYY-MM-DD')
            return [startDateOfMonth, endDateOfMonth]
        },
    },
    {
        text: '昨天',
        value: () => {
            const startDateOfMonth = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
            const endDateOfMonth = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
            return [startDateOfMonth, endDateOfMonth]
        },
    },
    {
        text: '最近7天',
        value: () => {
            const end = new Date()
            const startDate = dayjs().subtract(6, 'day').startOf('day')
            return [startDate, end]
        },
    },
    {
        text: '最近30天',
        value: () => {
            const end = new Date()
            const startDate = dayjs().subtract(30, 'day').startOf('day')
            return [startDate, end]
        },
    },
    {
        text: '全年',
        value: () => {
            const startDate = dayjs().startOf('year').format('YYYY-MM-DD')
            const end = dayjs().endOf('year').format('YYYY-MM-DD')
            return [startDate, end]
        },
    }
]

const date = ref('')
const toggleFullscreen = async () => {
    await fullscreen.toggle(fullScreenRef.value, {
        teleport: state.teleport
    })
    state.fullscreen = fullscreen.isFullscreen
}
</script>

<style lang="scss" scoped>
:deep(.el-input__wrapper) {
    width: 250px;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid #7AA3CC !important;
    font-size: 14px !important;
}

:deep(.el-range-input) {
    border: none;
    color: #ffffff !important;
    font-size: 14px !important;
}

:deep(.el-range-separator) {
    color: #ffffff !important;
}

:deep(.el-range__icon) {
    color: #ffffff !important;
}

.center-content {
    flex: 1
}

.time {
    color: #ffffff;
    font-size: 18px;
    position: absolute;
    bottom: 32px;
    right: 32px;
}

.gradient-text {
    background: linear-gradient(to right, #270ca0, #ffff00);
    /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
    -webkit-background-clip: text;
    /*将设置的背景颜色限制在文字中*/
    -webkit-text-fill-color: transparent;
    /*给文字设置成透明*/
}

.top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 114px;
    background-image: url('./assets/img/top-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90px;
    background-image: url('./assets/img/bottom-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.box {
    position: relative;
    padding: 114px 32px 0;
    // width: 100vw;
    // min-width: 1920px;
    box-sizing: border-box;
    min-height: 100vh;
    background-image: url('./assets/img/bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.quitBorder {
    border: 1px solid #7AA3CC;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 28px;
    border-radius: 5px;
    margin-top: 40px;
    margin-left: 20px;
}


.gradient-text {
    background: linear-gradient(180deg, #FFFFFF 25%, #8DD8E9 57%, #00C3DF 72%);
    /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
    -webkit-background-clip: text;
    /*将设置的背景颜色限制在文字中*/
    -webkit-text-fill-color: transparent;
    /*给文字设置成透明*/
}
</style>